HTMLify

style.css
Views: 32 | Author: cody
html {
  color-scheme: dark;
  background: #151515;
}

h1 {
  text-align: center;
  font-size: 16vmin;
  font-family: system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}

.overlap {
  --overlap: 0.25ch;
  --shadow-offset: 0.125ch;
  --shadow-spread: 0.25ch;
  --shadow-color: #000;
  letter-spacing: calc(var(--overlap) * -1);
  isolation: isolate;
}

.overlap__front {
  --mult: 1;
}

.overlap__back {
  --mult: -1;
}

.overlap>span {
  position: relative;
  z-index: calc(var(--index, 1) * var(--mult, 1));
}

.overlap__front>span:not(:first-of-type),
.overlap__back>span:not(:last-of-type) {
  text-shadow: calc(var(--mult, 1) * var(--shadow-offset, 0) * -1) 0 var(--shadow-spread, 0) var(--shadow-color, #000);
}

Comments